<template>
  <view>
         <my-search-bar placeholder="搜索" @click='goToSearch' />
    <view class="scroll-view-container">
      <!-- 左边的一级分类 -->
      <scroll-view
        class="left-scroll-view"
        scroll-y
        :style="{ height: h + 'px' }"
      >
        <view
          :class="[
            'left-scroll-view-item',
            currentIndex === index ? 'active' : ''
          ]"
          v-for="(item, index) in categories"
          :key="item.cat_id"
          @click="currentIndex = index"
          >{{ item.cat_name }}</view
        >
      </scroll-view>
      <!-- 二级&三级分类 -->
      <scroll-view
        scroll-y
        class="right-scroll-view"
        :style="{ height: h + 'px' }"
      >
        <view v-for="item in level2List" :key="item.cat_id">
          <!-- 二级标题 -->
          <view class="cate-lv2-title">
            <text>/ {{ item.cat_name }} /</text>
          </view>
          <!-- 三级分类列表 -->
          <view class="cate-lv3-list">
            <view
              class="cate-lv3-item"
              v-for="subitem in item.children"
              :key="subitem.cat_id"
              @click="goToList(subitem.cat_id)"
            >
              <image :src="subitem.cat_icon" mode="scaleToFill" />
              <text>{{ subitem.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import badgeMix from '@/mixins/tabbar-badge.js'
export default {
  mixins : [badgeMix],
  data() {
    return {
      categories: [], //分类数据
      currentIndex: 0, //默认check Index
      h: 0, //可使用窗口的高度
      cateLevel2: [],
      scrollTop: 0, // 右边scroll-view距离顶部的距离
    };
  },
  computed: {
    level2List() {
      return (
        this.categories[this.currentIndex] &&
        this.categories[this.currentIndex].children
      );
    },
  },
  onLoad() {
    this.getCategoriesData(); 
    const { windowHeight } = uni.getSystemInfoSync()
    this.h = windowHeight - 50
  },
  methods: {
    async getCategoriesData() {
      const res = await uni.$request({
        url: "categories",
      });
      console.log(res);
      if (res.meta.status == 200) {
        this.categories = res.message;
      }
    },
    goToList (cid) {
      uni.navigateTo({ url: `/subpkg/goods-list/index?cid=${cid}` })
    },
    goToSearch(){
      uni.navigateTo({
        url: '/subpkg/search/index'
      })
    }
  },
};
</script>

<style>
.scroll-view-container {
  display: flex;
}
.left-scroll-view {
  width: 240rpx;
}
.left-scroll-view-item {
  line-height: 60px;
  background-color: #f7f7f7;
  text-align: center;
  font-size: 12px;
}
.left-scroll-view-item {
  background-color: #ffffff;
  position: relative;
}
.active::before {
  content: " ";
  display: block;
  width: 3px;
  height: 30px;
  background-color: #c00000;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.cate-lv2-title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}
.cate-lv3-list {
  display: flex;
  flex-wrap: wrap;
}
.cate-lv3-item {
  width: 33.33%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
image {
  width: 60px;
  height: 60px;
}
text {
  font-size: 12px;
}
</style>